<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <link rel="icon" type="image/png" sizes="16x16" th:href="@{backed/assets/images/favicon.png}">
  <title>Material Pro Admin Template - The Most Complete & Trusted Bootstrap 4 Admin Template</title>
  <!-- Bootstrap Core CSS -->
  <link th:href="@{backed/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
  <!-- chartist CSS -->
  <link th:href="@{backed/assets/plugins/chartist-js/dist/chartist.min.css}" rel="stylesheet">
  <link th:href="@{backed/assets/plugins/chartist-js/dist/chartist-init.css}" rel="stylesheet">
  <link th:href="@{backed/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css}"
        rel="stylesheet">
  <!--This page css - Morris CSS -->
  <link th:href="@{backed/assets/plugins/c3-master/c3.min.css}" rel="stylesheet">
  <!-- Custom CSS -->
  <link th:href="@{backed/css/style.css}" rel="stylesheet">
  <!-- You can change the theme colors from here -->
  <link th:href="@{backed/css/colors/blue.css}" id="theme" rel="stylesheet">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
  <div class="preloader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
    </svg>
  </div>
  <!-- ============================================================== -->
  <!-- Main wrapper - style you can find in pages.scss -->
  <!-- ============================================================== -->
  <div id="main-wrapper">
    <!-- ============================================================== -->
    <!-- Topbar header - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <!--从commons.html中替换导航栏-->
    <div th:replace="~{commons/commons::topbar}"></div>
    <!-- ============================================================== -->
    <!-- End Topbar header -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Left Sidebar - style you can find in sidebar.scss  -->
    <!-- ============================================================== -->
    <!-- 从commons.html中替换侧边栏 -->
    <div th:replace="~{commons/commons::sidebar}"></div>
    <!-- ============================================================== -->
    <!-- End Left Sidebar - style you can find in sidebar.scss  -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Page wrapper  -->
    <!-- ============================================================== -->
    <div class="page-wrapper">
      <!-- ============================================================== -->
      <!-- Container fluid  -->
      <!-- ============================================================== -->
      <div class="container-fluid" id="context_vue">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row page-titles">
          <div class="col-md-5 col-8 align-self-center">
            <h3 class="text-themecolor">首页</h3>
<!--            <ol class="breadcrumb">-->
<!--              <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>-->
<!--              <li class="breadcrumb-item active">Dashboard</li>-->
<!--            </ol>-->
          </div>

        </div>
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Start Page Content -->
        <!-- ============================================================== -->
        <!-- Row -->
        <div class="row">
          <!-- Column -->
          <div class="col-lg-8 col-md-7">
            <div class="card">
              <div class="card-block">
                <div class="row">
                  <div class="col-12">
                    <div class="d-flex flex-wrap">
                      <div>
                        <h3 class="card-title">Sales Overview</h3>
                        <h6 class="card-subtitle">Ample Admin Vs Pixel Admin</h6></div>
                      <div class="ml-auto">
                        <ul class="list-inline">
                          <li>
                            <h6 class="text-muted text-success"><i class="fa fa-circle font-10 m-r-10 "></i>Ample</h6>
                          </li>
                          <li>
                            <h6 class="text-muted  text-info"><i class="fa fa-circle font-10 m-r-10"></i>Pixel</h6></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="col-12">
                    <div class="amp-pxl" style="height: 360px;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-5">
            <div class="card">
              <div class="card-block">
                <h3 class="card-title">Our Visitors </h3>
                <h6 class="card-subtitle">Different Devices Used to Visit</h6>
                <div id="visitor" style="height:290px; width:100%;"></div>
              </div>
              <div>
                <hr class="m-t-0 m-b-0">
              </div>
              <div class="card-block text-center ">
                <ul class="list-inline m-b-0">
                  <li>
                    <h6 class="text-muted text-info"><i class="fa fa-circle font-10 m-r-10 "></i>Mobile</h6></li>
                  <li>
                    <h6 class="text-muted  text-primary"><i class="fa fa-circle font-10 m-r-10"></i>Desktop</h6></li>
                  <li>
                    <h6 class="text-muted  text-success"><i class="fa fa-circle font-10 m-r-10"></i>Tablet</h6></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- Row -->
        <!-- Row -->
        <div class="row">
          <!-- Column -->
          <div class="col-lg-4 col-xlg-3 col-md-5">
            <!-- Column -->
            <div class="card">
              <img class="card-img-top" th:src="@{backed/assets/images/background/profile-bg.jpg}" alt="Card image cap">
              <div class="card-block little-profile text-center">
                <div class="pro-img"><img th:src="@{backed/assets/images/users/4.jpg}" alt="user"/></div>
                <h3 class="m-b-0">Angela Dominic</h3>
                <p>Web Designer &amp; Developer</p>
                <a href="javascript:void(0)" class="m-t-10 waves-effect waves-dark btn btn-primary btn-md btn-rounded">Follow</a>
                <div class="row text-center m-t-20">
                  <div class="col-lg-4 col-md-4 m-t-20">
                    <h3 class="m-b-0 font-light">1099</h3><small>Articles</small></div>
                  <div class="col-lg-4 col-md-4 m-t-20">
                    <h3 class="m-b-0 font-light">23,469</h3><small>Followers</small></div>
                  <div class="col-lg-4 col-md-4 m-t-20">
                    <h3 class="m-b-0 font-light">6035</h3><small>Following</small></div>
                </div>
              </div>
            </div>
            <!-- Column -->
            <div class="card">
              <div class="card-block bg-info">
                <h4 class="text-white card-title">My Contacts</h4>
                <h6 class="card-subtitle text-white m-b-0 op-5">Checkout my contacts here</h6>
              </div>
              <div class="card-block">
                <div class="message-box contact-box">
                  <h2 class="add-ct-btn">
                    <button type="button" class="btn btn-circle btn-lg btn-success waves-effect waves-dark">+</button>
                  </h2>
                  <div class="message-widget contact-widget">
                    <!-- Message -->
                    <a href="#">
                      <div class="user-img"><img th:src="@{backed/assets/images/users/1.jpg}" alt="user"
                                                 class="img-circle"> <span
                          class="profile-status online pull-right"></span></div>
                      <div class="mail-contnet">
                        <h5>Pavan kumar</h5> <span class="mail-desc">info@domain.com</span></div>
                    </a>
                    <!-- Message -->
                    <a href="#">
                      <div class="user-img"><img th:src="@{backed/assets/images/users/2.jpg}" alt="user"
                                                 class="img-circle"> <span
                          class="profile-status busy pull-right"></span></div>
                      <div class="mail-contnet">
                        <h5>Sonu Nigam</h5> <span class="mail-desc">pamela1987@gmail.com</span></div>
                    </a>
                    <!-- Message -->
                    <a href="#">
                      <div class="user-img"><span class="round">A</span> <span
                          class="profile-status away pull-right"></span></div>
                      <div class="mail-contnet">
                        <h5>Arijit Sinh</h5> <span class="mail-desc">cruise1298.fiplip@gmail.com</span></div>
                    </a>
                    <!-- Message -->
                    <a href="#">
                      <div class="user-img"><img th:src="@{backed/assets/images/users/4.jpg}" alt="user"
                                                 class="img-circle"> <span
                          class="profile-status offline pull-right"></span></div>
                      <div class="mail-contnet">
                        <h5>Pavan kumar</h5> <span class="mail-desc">kat@gmail.com</span></div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-8 col-xlg-9 col-md-7">
            <div class="card">
              <!-- Nav tabs -->
              <ul class="nav nav-tabs profile-tab" role="tablist">
                <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#home" role="tab">Activity</a>
                </li>
                <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a></li>
                <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a></li>
              </ul>
              <!-- Tab panes -->
              <div class="tab-content">
                <div class="tab-pane active" id="home" role="tabpanel">
                  <div class="card-block">
                    <div class="profiletimeline">
                      <div class="sl-item">
                        <div class="sl-left"><img th:src="@{backed/assets/images/users/1.jpg}" alt="user"
                                                  class="img-circle"></div>
                        <div class="sl-right">
                          <div><a href="#" class="link">John Doe</a> <span class="sl-date">5 minutes ago</span>
                            <p>assign a new task <a href="#"> Design weblayout</a></p>
                            <div class="row">
                              <div class="col-lg-3 col-md-6 m-b-20"><img th:src="@{backed/assets/images/big/img1.jpg}"
                                                                         alt="user" class="img-responsive radius"></div>
                              <div class="col-lg-3 col-md-6 m-b-20"><img th:src="@{backed/assets/images/big/img2.jpg}"
                                                                         alt="user" class="img-responsive radius"></div>
                              <div class="col-lg-3 col-md-6 m-b-20"><img th:src="@{backed/assets/images/big/img3.jpg}"
                                                                         alt="user" class="img-responsive radius"></div>
                              <div class="col-lg-3 col-md-6 m-b-20"><img th:src="@{backed/assets/images/big/img4.jpg}"
                                                                         alt="user" class="img-responsive radius"></div>
                            </div>
                            <div class="like-comm"><a href="javascript:void(0)" class="link m-r-10">2 comment</a> <a
                                href="javascript:void(0)" class="link m-r-10"><i class="fa fa-heart text-danger"></i> 5
                              Love</a></div>
                          </div>
                        </div>
                      </div>
                      <hr>
                      <div class="sl-item">
                        <div class="sl-left"><img th:src="@{backed/assets/images/users/2.jpg}" alt="user"
                                                  class="img-circle"></div>
                        <div class="sl-right">
                          <div><a href="#" class="link">John Doe</a> <span class="sl-date">5 minutes ago</span>
                            <div class="m-t-20 row">
                              <div class="col-md-3 col-xs-12"><img th:src="@{backed/assets/images/big/img1.jpg}"
                                                                   alt="user" class="img-responsive radius"></div>
                              <div class="col-md-9 col-xs-12">
                                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent
                                  libero. Sed cursus ante dapibus diam. </p> <a href="#" class="btn btn-success"> Design
                                weblayout</a></div>
                            </div>
                            <div class="like-comm m-t-20"><a href="javascript:void(0)" class="link m-r-10">2 comment</a>
                              <a href="javascript:void(0)" class="link m-r-10"><i class="fa fa-heart text-danger"></i> 5
                                Love</a></div>
                          </div>
                        </div>
                      </div>
                      <hr>
                      <div class="sl-item">
                        <div class="sl-left"><img th:src="@{backed/assets/images/users/3.jpg}" alt="user"
                                                  class="img-circle"></div>
                        <div class="sl-right">
                          <div><a href="#" class="link">John Doe</a> <span class="sl-date">5 minutes ago</span>
                            <p class="m-t-10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
                              odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh
                              elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue
                              semper </p>
                          </div>
                          <div class="like-comm m-t-20"><a href="javascript:void(0)" class="link m-r-10">2 comment</a>
                            <a href="javascript:void(0)" class="link m-r-10"><i class="fa fa-heart text-danger"></i> 5
                              Love</a></div>
                        </div>
                      </div>
                      <hr>
                      <div class="sl-item">
                        <div class="sl-left"><img th:src="@{backed/assets/images/users/4.jpg}" alt="user"
                                                  class="img-circle"></div>
                        <div class="sl-right">
                          <div><a href="#" class="link">John Doe</a> <span class="sl-date">5 minutes ago</span>
                            <blockquote class="m-t-10">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                            </blockquote>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--second tab-->
                <div class="tab-pane" id="profile" role="tabpanel">
                  <div class="card-block">
                    <div class="row">
                      <div class="col-md-3 col-xs-6 b-r"><strong>Full Name</strong>
                        <br>
                        <p class="text-muted">Johnathan Deo</p>
                      </div>
                      <div class="col-md-3 col-xs-6 b-r"><strong>Mobile</strong>
                        <br>
                        <p class="text-muted">(123) 456 7890</p>
                      </div>
                      <div class="col-md-3 col-xs-6 b-r"><strong>Email</strong>
                        <br>
                        <p class="text-muted">johnathan@admin.com</p>
                      </div>
                      <div class="col-md-3 col-xs-6"><strong>Location</strong>
                        <br>
                        <p class="text-muted">London</p>
                      </div>
                    </div>
                    <hr>
                    <p class="m-t-30">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
                      rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
                      Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
                      Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                      the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                      type and scrambled it to make a type specimen book. It has survived not only five centuries </p>
                    <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
                      passages, and more recently with desktop publishing software like Aldus PageMaker including
                      versions of Lorem Ipsum.</p>
                    <h4 class="font-medium m-t-30">Skill Set</h4>
                    <hr>
                    <h5 class="m-t-30">Wordpress <span class="pull-right">80%</span></h5>
                    <div class="progress">
                      <div class="progress-bar bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0"
                           aria-valuemax="100" style="width:80%; height:6px;"><span class="sr-only">50% Complete</span>
                      </div>
                    </div>
                    <h5 class="m-t-30">HTML 5 <span class="pull-right">90%</span></h5>
                    <div class="progress">
                      <div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0"
                           aria-valuemax="100" style="width:90%; height:6px;"><span class="sr-only">50% Complete</span>
                      </div>
                    </div>
                    <h5 class="m-t-30">jQuery <span class="pull-right">50%</span></h5>
                    <div class="progress">
                      <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                           aria-valuemax="100" style="width:50%; height:6px;"><span class="sr-only">50% Complete</span>
                      </div>
                    </div>
                    <h5 class="m-t-30">Photoshop <span class="pull-right">70%</span></h5>
                    <div class="progress">
                      <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0"
                           aria-valuemax="100" style="width:70%; height:6px;"><span class="sr-only">50% Complete</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane" id="settings" role="tabpanel">
                  <div class="card-block">
                    <form class="form-horizontal form-material">
                      <div class="form-group">
                        <label class="col-md-12">Full Name</label>
                        <div class="col-md-12">
                          <input type="text" placeholder="Johnathan Doe" class="form-control form-control-line">
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="example-email" class="col-md-12">Email</label>
                        <div class="col-md-12">
                          <input type="email" placeholder="johnathan@admin.com" class="form-control form-control-line"
                                 name="example-email" id="example-email">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-md-12">Password</label>
                        <div class="col-md-12">
                          <input type="password" value="password" class="form-control form-control-line">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-md-12">Phone No</label>
                        <div class="col-md-12">
                          <input type="text" placeholder="123 456 7890" class="form-control form-control-line">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-md-12">Message</label>
                        <div class="col-md-12">
                          <textarea rows="5" class="form-control form-control-line"></textarea>
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-12">Select Country</label>
                        <div class="col-sm-12">
                          <select class="form-control form-control-line">
                            <option>London</option>
                            <option>India</option>
                            <option>Usa</option>
                            <option>Canada</option>
                            <option>Thailand</option>
                          </select>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="col-sm-12">
                          <button class="btn btn-success">Update Profile</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <!-- 从commons.html中替换底部栏 -->
      <div th:replace="~{commons/commons::footer}"></div>

    </div>

  </div>


<script th:src="@{backed/assets/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script th:src="@{backed/assets/plugins/bootstrap/js/tether.min.js}"></script>
<script th:src="@{backed/assets/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script th:src="@{backed/js/jquery.slimscroll.js}"></script>
<!--Wave Effects -->
<script th:src="@{backed/js/waves.js}"></script>
<!--Menu sidebar -->
<script th:src="@{backed/js/sidebarmenu.js}"></script>
<!--stickey kit -->
<script th:src="@{backed/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js}"></script>
<!--Custom JavaScript -->
<script th:src="@{backed/js/custom.min.js}"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!-- chartist chart -->
<script th:src="@{backed/assets/plugins/chartist-js/dist/chartist.min.js}"></script>
<script th:src="@{backed/assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.min.js}"></script>
<!--c3 JavaScript -->
<script th:src="@{backed/assets/plugins/d3/d3.min.js}"></script>
<script th:src="@{backed/assets/plugins/c3-master/c3.min.js}"></script>
<!-- Chart JS -->
<script th:src="@{backed/js/dashboard1.js}"></script>
<script th:src="@{backed/js/vue.js}"></script>
<!--<script th:src="@{backed/js/commons.js}"></script>-->
<script th:replace="~{commons/commons::topbar_vue}" ></script>
<script>
  const vm = new Vue({
    el: "#context_vue",
    data: {

    },
    mounted: function () {

    },
    methods: {

    }

  })
</script>
</body>

</html>
<script setup lang="ts">
</script>